<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      src="{{ url_for('static', filename='mobile/js/utils/rem.js') }}"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='mobile/style/timetable.css') }}"
    />
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='mobile/style/association.css') }}"
    />
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='mobile/style/course.css') }}"
    />
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='mobile/css/app.css') }}"
    />

    <title>My club</title>
  </head>

  <body>
    <div class="ass">
      <div class="ass-con">
        <div class="phone-header">
          <div class="phone-input-con">
            <input type="text" placeholder="search" class="phone-ass-input" />
            <img
              src="{{ url_for('static', filename='mobile/img/014.svg') }}"
              class="img-014 cursor-pointer"
              alt=""
            />
          </div>
        </div>

        <div class="ass-side">
          <div class="ass-header-phone">
            <div class="ass-logo">logo</div>
            <div class="ass-header-name">{{ school }}</div>
          </div>
          <ul class="ass-side-list">
            <li>
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">my course</div>
            </li>
            <li class="no-open">
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">my task</div>
            </li>

            <li class="no-open">
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">notification</div>
            </li>

            <li>
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">timetable</div>
            </li>

            <li>
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">Grades</div>
            </li>

            <li class="no-open">
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">homework</div>
            </li>

            <li class="active">
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">Social</div>
            </li>

            <li class="no-open">
              <div class="ass-icon"></div>
              <div class="ass-side-list-item-con">Societies</div>
            </li>
          </ul>
          <div class="under-line"></div>
          <div class="ass-workplace">
            <p>workplace</p>
            <button>
              <span>forum</span>
              <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                <path
                  d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z"
                ></path>
              </svg>
            </button>
            <button>
              <span>My upload</span>
              <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                <path
                  d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z"
                ></path>
              </svg>
            </button>
          </div>
          <a href="{{ url_for('auth.login') }}" class="signOut">
						<img class="signup" src="{{ url_for('static', filename='mobile/img/signup.svg') }}" alt="" />
						sign out
					</a>
        </div>
        <div class="ass-contents">
          <div class="ass-content">
            <div class="find-teacher">
              <div class="find-teacher-header">
                <p>Find your teacher</p>
                <div class="language-cons">
                  <p class="language-header">
                    <span>English</span>
                    <svg
                      class="down"
                      viewBox="0 0 32 32"
                      width="100%"
                      height="100%"
                    >
                      <path
                        d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z"
                      ></path>
                    </svg>
                  </p>
                  <div class="language">
                    <p class="active">
                      <span>English</span>
                      <img
                        src="{{ url_for('static', filename='mobile/img/008.svg') }}"
                        alt=""
                      />
                    </p>
                    <p>
                      <span>Chinese</span>
                      <img
                        src="{{ url_for('static', filename='mobile/img/008.svg') }}"
                        alt=""
                      />
                    </p>
                  </div>
                </div>
              </div>
              <div class="find-teacher-lists">
                {% for teacher in teachers %}
                <div class="find-teacher-list">
                  <p class="find-teacher-left">
                    <span class="find-teacher-circle"></span>
                    {{ teacher.name }}
                  </p>
                  <p class="find-teacher-con">{{ teacher.post }}</p>
                  <img
                    src="{{ url_for('static', filename='img/003.svg') }}"
                    alt=""
                  />
                </div>
                {% endfor %}
              </div>
            </div>
            <div class="my-group">
              <p class="my-group-title">My group</p>
              <div class="my-group-con">
                <div class="my-group-list" onclick="to_course_detail(1)">
                  <div>
                    <p class="my-group-circle"></p>
                    <p class="my-group-titles">Taekwondo Club</p>
                    <p class="my-group-tip">
                      Club training at 3pm this Saturday….
                    </p>
                    <p>
                      <img
                        src="{{ url_for('static', filename='mobile/img/009.svg') }}"
                        alt=""
                      />
                    </p>
                    <p>
                      <button class="sign-up-btn">Sign up</button>
                    </p>
                  </div>
                </div>
                <div class="my-group-list" onclick="to_course_detail(2)">
                  <div>
                    <p class="my-group-circle"></p>
                    <p class="my-group-titles">Taekwondo Club</p>
                    <p class="my-group-tip">
                      Club training at 3pm this Saturday….
                    </p>
                    <p>
                      <img
                        src="{{ url_for('static', filename='mobile/img/009.svg') }}"
                        alt=""
                      />
                    </p>
                    <p>
                      <button class="sign-up-btn">Sign up</button>
                    </p>
                  </div>
                </div>
                <div class="my-group-list" onclick="to_course_detail(3)">
                  <div>
                    <p class="my-group-circle"></p>
                    <p class="my-group-titles">Taekwondo Club</p>
                    <p class="my-group-tip">
                      Club training at 3pm this Saturday….
                    </p>
                    <p>
                      <img
                        src="{{ url_for('static', filename='mobile/img/009.svg') }}"
                        alt=""
                      />
                    </p>
                    <p>
                      <button class="sign-up-btn">Sign up</button>
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <div class="my-friends">
              <p class="my-friends-title">My friends</p>
              <div class="my-friends-lists">
                <div class="my-friends-list">
                  <div class="my-friends-list-left">
                    <span class="my-friends-circle"></span>
                    <div>
                      <p class="my-friends-name">Abby liiy</p>
                      <p class="my-friends-num">2322098749@gmail.com</p>
                    </div>
                  </div>
                  <img
                    src="{{ url_for('static', filename='mobile/img/004.svg') }}"
                    alt=""
                  />
                </div>
                <div class="my-friends-list">
                  <div class="my-friends-list-left">
                    <span class="my-friends-circle"></span>
                    <div>
                      <p class="my-friends-name">Abby liiy</p>
                      <p class="my-friends-num">2322098749@gmail.com</p>
                    </div>
                  </div>
                  <img
                    src="{{ url_for('static', filename='mobile/img/004.svg') }}"
                    alt=""
                  />
                </div>
                <div class="my-friends-list">
                  <div class="my-friends-list-left">
                    <span class="my-friends-circle"></span>
                    <div>
                      <p class="my-friends-name">Abby liiy</p>
                      <p class="my-friends-num">2322098749@gmail.com</p>
                    </div>
                  </div>
                  <img
                    src="{{ url_for('static', filename='mobile/img/004.svg') }}"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script
      src="{{ url_for('static', filename='mobile/js/libs/jquery.min.js') }}"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script>
      function to_course_detail(id) {
        location.href = "/course/lesson/" + id;
      }
      $(".phone-header .img-014").click(function (e) {
        e.stopPropagation();
        $(".ass-side").css("display", "block");
      });
      $(".ass-con").click(function () {
        $(".ass-side").css("display", "none");
      });
      $(".ass-side").click(function (event) {
        event.stopPropagation();
      });
      $(".ass-side-list>li:nth-child(1)").on("click", function () {
        location.href = "/student/course";
      });
      $(".ass-side-list>li:nth-child(4)").on("click", function () {
        location.href = "/student/timetable";
      });
      $(".ass-side-list>li:nth-child(5)").on("click", function () {
        location.href = "/student/grade";
      });
      $(".ass-side-list>li:nth-child(7)").on("click", function () {
        location.href = "/student/social";
      });
      $(".find-teacher-list").on("click", function () {
        $(this).addClass("active").siblings().removeClass("active");
      });
      $(".language-cons .language p").on("click", function () {
        $(this).addClass("active").siblings().removeClass("active");
        $(".language-header span").html($(this).children("span").html());
      });
    </script>
  </body>
</html>
